<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <script src="../../vue.js"></script>

      <link rel="stylesheet" href="./css/qq.css">


      <title>好友列表</title>

      <style>
            body,
            ul,
            li,
            h2 {
                  margin: 0;
                  padding: 0;
            }

            li {
                  list-style: none;
            }

            .list>div {
                  margin-bottom: 10px;
            }

            .list .show {
                  display: block;
            }
      </style>
</head>

<body>


      <div id="app" class="wrap">


            <div class="list">

                  <div v-for="item,i in QQFriends">
                        <h2 @click="showTab(i)" :style="{background:showIndex===i?'red':''}">
                              <span></span>{{item.title}}</h2>

                        <ul :style="{display:showIndex===i?'block':'none'}">

                              <li v-for=" option in item.list">{{option.newsTitle}}</li>
                        </ul>
                  </div>

            </div>

      </div>


      <script>
            let data = [{
                        title: '我的好友',
                        list: [{
                                    newsTitle: '新闻版块1'
                              },
                              {
                                    newsTitle: '新闻版块2'
                              },
                              {
                                    newsTitle: '新闻版块3'
                              }
                        ]
                  },
                  {
                        title: '黑名单',
                        list: [{
                                    newsTitle: '娱乐版块1'
                              },
                              {
                                    newsTitle: '娱乐版块2'
                              },
                              {
                                    newsTitle: '娱乐版块3'
                              }
                        ]
                  },
                  {
                        title: '我的家人',
                        list: [{
                                    newsTitle: '体育版块1'
                              },
                              {
                                    newsTitle: '体育版块2'
                              },
                              {
                                    newsTitle: '体育版块3'
                              }
                        ]
                  }
            ];
            new Vue({


                  el: '#app',
                  data: {

                        QQFriends: data,

                        showIndex: -1,
                  },

                  methods: {
                        
                        showTab(index) {

                              this.showIndex = this.showIndex===index?-1:index;
                        }
                  },

                 
                  
            });
      </script>

</body>

</html>